<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右键菜单</title>
    <style>
        *{padding: 0; margin: 0;}
        ul,
        li {
            list-style: none;
        }

        ul {
            width: 100px;
            position: absolute;
            display: none;
            background-color: bisque;
            border: 1px solid gray;
            line-height: 30px;
            text-align: center;
        }

        li:not(:last-of-type){
            border-bottom: 1px dashed goldenrod;
            
        }
        li:hover{
            background-color: #e2d7ba;
        }
    </style>
</head>

<body>
    <ul class="content-menu">
        <li>NBA</li>
        <li>新闻</li>
        <li>娱乐</li>
    </ul>

    <script>
         function onMenu() {
            let menu = document.querySelector('.content-menu')
            document.oncontextmenu = function (e) {
                e = e || window.event
                e.preventDefault()

                let x = e.clientX
                let y = e.clientY
                menu.style.display = 'block'
                menu.style.top = y + 'px'
                menu.style.left = x + 'px'
            }

            document.onmousedown = function(){
                menu.style.display = 'none'
            }
        }

        onMenu()
    </script>
</body>

</html>